<template>
  <div class="box">
    <!-- 视口容器 -->
    <div class="container" ref="container"></div>
  </div>

</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue';
import { getobjm } from '@/utils/getobjm';
import { ES3DTileset } from 'earthsdk3'
import tiles from '@/assets/3DT/tileset.json'

const objm = getobjm();
const container = ref<HTMLDivElement>();
let sceneObject: any = null;
// 监听视口状态
objm.viewerCreatedEvent.don((viewer) => {
  viewer.flyIn([120.15487432479986, 30.10734187072578, 11267.53961605032], [8.142219984546603e-13, -45.09919939073693, 359.9999999999594], 3)
});

nextTick(() => {
  if (!container.value) return;
  //创建视口
  const viewer = objm.createCesiumViewer(container.value);
  sceneObject = objm.createSceneObject(ES3DTileset)

  // url服务地址
  sceneObject.url = "https://www.pipeser.com/cesiumlab/7hfKb4S4/tileset.json"
  // sceneObject.url = tiles

  // 加载完成事件
  sceneObject.tilesetReady.don(() => {
    sceneObject.flyTo()
  })

})

// 点击按钮调用飞行定位
function flyTo() {
  if (sceneObject) sceneObject.flyTo()
}
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.btn-box {
  height: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 1;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

botton {
  padding: 0 10px;
  height: 30px;
  margin: 10px;
  background-color: #01fa7d8c;
  border: 1px solid #01fa7d8c;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
}
</style>